<template>
  <div class="box">
    <div class="boxcontent">
      <div>
        <div>支持格式：mp4、mov、flv、wmv、rmvb</div>
        <div>最大上传大小：50M</div>
      </div>
      <div class="uplod"><Button type="primary" size="large" @click="saveVideo" :loading="saveLoading">开始上传</Button></div>
    </div>
    <Divider dashed />
    <div class="videobox">
      <div class="videoUp">
        <Upload
          :format="['mp4','flv','mov','wmv','rmvb']"
          type="drag"
          :action="requestAction"
          :headers="{'Authorization': 'Bearer ' + token,'projectid':project}"
          :show-upload-list="false"
          :on-format-error="(res) =>videoFormatError(res)"
          :before-upload="(res) => handleBeforeVideos( res)"
          :on-progress="(res) => handleVideoProgress(res)"
          :on-success="(res) =>videoexcellUploadSuccess(res)"
          :on-error="(res) => handleVideoError(res)"
          >
          <Progress v-if="showProgress" :percent="percentage" status="active"></Progress>
          <div style="padding: 53px 20px">
              <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
              <p>点击选择要上传的视频，最大支持50M</p>
          </div>
        </Upload>
      </div>
      <div v-if="videoUrl">
              <video :src="videoUrl" controls  width="300" height="180"></video>
      </div>
    </div>
    <div style="padding:15px 40px">
        <h4 style="color:red">说明：视频太大或者上传太慢，可使用FTP上传</h4>
        <div class="videoTitle">
          <p>FTP地址：{{data.sck_ip}}</p>
          <p>FTP账号：{{data.sck_username}}</p>
          <p>FTP密码：{{data.sck_pwd}}</p>
        </div>
      </div>
    <div>

    </div>
  </div>
</template>
<script>
    import { saveVideo, materialCheck } from '@/api/myuplod.js'
    import Setting from '@/setting';
    import util from '@/libs/util';
    export default {
        data () {
            return {
                token: util.cookies.get('token'),
                project: util.storage.get('currentProject'),
                baseUrl: Setting.apiBaseURL,
                url: '',
                videoUrl: '', // 拼接过http的视频地址
                video: '', // 要保存的视频
                percentage: 0,
                showProgress: false,
                cannotSave: false,
                uploading: false,
                files: null,
                requestAction: '',
                saveLoading: false,
                data: {}
            }
        },
        mounted () {
            this.requestAction = this.baseUrl + `/v1/material/upload/video-upload`;
            this.url = this.baseUrl + `/library_image_tmp/`
            materialCheck().then(res => {
                this.data = res
            })
        },
        methods: {
            // 视频上传成功
            videoexcellUploadSuccess (res) {
                this.video = res.data.video_url;
                this.videoUrl = `${this.url}${this.video}`
                this.uploadContents = res.data;
                // this.videoUrl = res.data;
                this.showProgress = false;
                this.cannotSave = false;
                this.uploading = false;
                this.percentage = 0;
                this.$Notice.destroy();
            },
            // 视频上传回调之前
            handleBeforeVideos (res) {
                this.files = res
                // console.log(res, '上传回调之前')
                this.videoUrl = '';
                this.showProgress = true;
                this.cannotSave = true;
                this.uploading = true;
            },
            // 上传失败
            handleVideoError (res) {
                this.showProgress = false;
                this.cannotSave = false;
                this.uploading = false;
                this.percentage = 0;
                this.$Message.error('上传视频失败');
                this.$Notice.destroy();
            },
            // 进度
            handleVideoProgress (event) {
                this.percentage = Math.round(event.loaded * 100 / event.total);
                if (this.percentage == 100) {
                    this.$Notice.warning({
                        title: '上传视频完成',
                        duration: 0,
                        desc: '正在处理视频并获取视频第一帧图片，请在图片回显后再保存'
                    });
                }
            },
            // 上传保存
            saveVideo () {
                if (this.videoUrl) {
                    this.saveLoading = true;
                    saveVideo({ video_url: this.video }).then(res => {
                        this.$Message.success('上传成功');
                        this.saveLoading = false;
                        this.videoUrl = ''
                    }).catch(() => {
                        this.saveLoading = false;
                    })
                }
            }
        }
    }
</script>
<style scoped>
.box{
  padding: 0 20px;
  position: relative;
}
.boxcontent{
  display: flex;
  justify-content: space-between;
  padding: 10px 40px;
  }
.videobox{
  padding:  0 20px;
  display: flex;
  justify-content:space-between;
}
.videoTitle{
  line-height: 30px;
}
.videoUp{
  margin-left: 20px;
}
/deep/.ivu-upload{
  width: 100%;
  height: 180px;
}
/* .uplod  /deep/.ivu-btn-primary{
  position: absolute;
  top: 10px;
  right: 20px;
} */
</style>
